<template>
  <div>
    <!-- 轮播图区域 -->
    <Carousel />
    <!-- 搜索 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 等级 -->
        <Level />
        <!-- 地区 -->
        <Region />
        <!-- 展示医院的结构 -->
        <div class="hostipal">
          <Card class="item" v-for="item in hospitalList" :key="item.id" :data="item" />
        </div>
      </el-col>
      <el-col :span="6">
        <Tip />
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, jumper, total,sizes"
        :total="total"
        @size-change="getHospitalList"
        @current-change="getHospitalList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { reqHostipal } from '@/api/home'
import { Content, HospitalResponseData } from '@/api/home/type'
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Card from './card/index.vue'
import Region from './region/index.vue'
import Tip from './tip/index.vue'

// 分页器
let pageNo = ref(1)
let pageSize = ref(10)
let total = ref(0)
let hospitalList = ref<Content>([])
// 组件挂载完毕
onMounted(() => {
  getHospitalList()
})
// 获取已有医院的数据
const getHospitalList = async () => {
  const { data }: HospitalResponseData = await reqHostipal(pageNo.value, pageSize.value)
  total.value = data.totalElements
  hospitalList.value = data.content
}
</script>

<style lang="scss" scoped>
.hostipal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0;
  }
}
.pagination {
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
